<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Blockly Shareable Procedures</title>
  <style>
    html, body {
      margin: 0;
    }

    h2, h3 {
      padding: 1em;
      margin: 0;
      background-color: black;
      color: white;
      font-family: monospace;
    }

    #root {
      display: flex;
    }

    #saveArea {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100vh;
    }

    .save {
      flex-grow: 1;
      background-color: black;
      color: white;
      resize: none;
    }

    .blockly {
      flex-grow: 4;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="blockly" id="blockly1"></div>
    <div class="blockly" id="blockly2"></div>
    <div id="saveArea">
      <h2>Saved State</h2>
      <input id="load" type="button" value="Reload"/>
      <h3>Workspace 1</h3>
      <textarea class="save" id="save1"></textarea>
      <h3>Workspace 2</h3>
      <textarea class="save" id="save2"></textarea>
    </div>
  </div>
  <script src="../build/test_bundle.js"></script>
</body>

</html>
